;(function (name) {
    window.components = window.components || {}
    window.components[name] = {
        props: {
            data: [],
            columns: [],
            actions: {},
            id: 'Id'
        },
        name,
        mounted() {},
        watch: {
            notChecked(value) {
                this.isCheckAll = !value
            }
        },
        computed: {
            notChecked() {
                return this.data.some(it => !it.checked)
            }
        },
        methods: {
            onChange(event) {
                const checked = event.target.checked || this.notChecked
                this.data.forEach(element => {
                    element.checked = checked
                })
            }
        },
        data() {
            return {
                isCheckAll: false
            }
        },
        template: `
<div class="container-actions">
    <slot name="table-actions">
        <div class="btn-group">
            <button v-for="item in actions" :class="item.class" :disabled="item.disabled" @click="item.onClick">{{item.label}}</button>
        </div>
    </slot>
    <div></div>
</div>
<table class="table table-bordered" role="table">
    <thead>
        <tr role="row">
            <td class="cell" role="cell">
                <div class="flex-center">
                    <input type="checkbox" v-model="isCheckAll" @change="onChange"/>
                </div>
            </td>
            <th class="cell" v-for="column in columns" role="cell">
                <div :class="column.class">
                    <div>{{column.label}}</div>
                    <div class="table-column-actions">
                        <icon-svg
                            v-if="column.onSort"
                            class="user-select-none"
                            type="button"
                            @click="evt=>column.onSort(column,evt)"
                            size="18px"
                            name="sort"></icon-svg>
                        <icon-svg
                            v-if="column.onSort"
                            class="user-select-none"
                            type="button"
                            @click="evt=>column.onSort(column,evt)"
                            size="18px"
                            name="filter"></icon-svg>
                    </div>
                </div>
            </th>
            <td class="cell" role="cell">
                <div class="flex-center">
                    <div class="cell-box">操作</div>
                </div>
            </td>
        </tr>
    </thead>
    <tbody role="rowgroup">
        <tr v-for="item in data" role="row" :key="item[id]">
            <td class="cell" role="cell">
                <div class="flex-center">
                    <input type="checkbox" v-model="item.checked" />
                </div>
            </td>
            <td class="cell" v-for="column in columns" role="cell">
                <div
                    :class="column.class"
                    :style="{maxWidth:column.maxWidth}">
                    <component
                        v-if="column.component"
                        :is="column.component"></component>
                    <span v-else>
                        <slot :row="item" :column="column" name="td"></slot>
                    </span>
                    <button
                        v-if="column.onClick"
                        class="bi bi-box-arrow-up-right btn btn-open"
                        @click="evt=>column.onClick(item,column,evt)"></button>
                </div>
            </td>
            <td class="cell" role="cell">
                <slot name="td-actions" :row="item"></slot>
            </td>
        </tr>
    </tbody>
</table>
`
    }
})('CommonTable')
